<template>
	<view class="container">
		<view class="content">
			<view class="photo">
				<span id="photo-text">头像</span>
				<image src="../../static/image/person-photo.png" id="photo-img" v-model="message.userImg"></image>
				<!-- <view class="photo-img"></view> -->
				<image src="../../static/image/right.png"></image>
			</view>
			<view class="message" id="name">
				<span>昵称</span>
				<input type="text" value="" placeholder="未填写" v-model="message.userName"/>
				<image src="../../static/image/right.png"></image>
			</view>
			<view class="message" id="sex">
				<span>性别</span>
				<input type="text" value="" placeholder="未填写" v-model="message.userSex"/>
				<image src="../../static/image/right.png"></image>
			</view>
			<view class="message" id="phone">
				<span>绑定手机号</span>
				<input type="text" value="" placeholder="未填写" v-model="message.userPhone"/>
				<image src="../../static/image/right.png"></image>
			</view>
		</view>
		<view class="btn" @click="submit">
			<span class="btn-text">保存</span>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				message:{
					userImg:"",
					userName:"",
					userSex:"",
					userPhone:""
				}
			}
		},
		methods:{
			submit(){
				if(this.message.userName=="" || this.message.userSex=="" || this.message.userPhone==""){
					alert("请完善信息")
				}
				console.log(this.message)
			}
		}
	}
</script>

<style>
	#{
		margin: 0;
		padding: 0;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		position: absolute;
	}
	.content{
		margin: 12rpx 0 31rpx 0;
	}
	.photo{
		height: 150rpx;
		display: flex;
		margin-bottom: 2rpx;
		background-color: #FFFFFF;
	}
	#photo-text{
		line-height: 150rpx;
	}
	#photo-img{
		width: 87rpx;
		height: 87rpx;
		position: absolute;
		top: 45rpx;
		right: 90rpx;
		/* background-image: url(../../static/image/person-photo.png); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.content span{
		font-size: 28rpx;
		font-weight: 400;
		color: #343434;
		margin-left: 40rpx;
		line-height: 106rpx;
	}
	.photo image{
		width: 30rpx;
		height: 35rpx;
		position: absolute;
		top: 70rpx;
		right: 40rpx;
	}
	.message image{
		width: 30rpx;
		height: 35rpx;
		position: absolute;
		top: 40rpx;
		right: 40rpx;
	}
	.message input{
		height: 106rpx;
		text-align: right;
		position: absolute;
		right: 90rpx;
	}
	.message{
		height: 106rpx;
		display: flex;
		margin-bottom: 2rpx;
		background: #FFFFFF;
		position: relative;
	}
	.btn{
		width: 654rpx;
		height: 86rpx;
		margin: 0 auto;
		text-align: center;
		background-image: url(../../static/image/person-img.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.btn-text{
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 86rpx;
	}
</style>
